




setTimeout(function(){


    


    function Fang(ele){
        this.leftbox=ele.querySelector(".leftbox")
        this.leftImg=this.leftbox.querySelector('img')
        this.mark=ele.querySelector('.mark')
        this.lis=ele.querySelectorAll('li')
        this.rightbox=ele.querySelector('.rightbox')
        this.rightImg=this.rightbox.querySelector('img')
        this.fangda()
        this.qiehuan()
    }
    Fang.prototype.fangda=function(){
        this.leftbox.onmouseover=()=>{
            this.mark.style.display='block'
            this.rightbox.style.display='block'
        }
        this.leftbox.onmousemove=(e)=>{
            var e = e || window.event
            //获取当前鼠标的移动坐标
            var left1=e.pageX-this.leftbox.offsetLeft-parseInt(this.mark.offsetWidth/2)
            var top1=e.pageY-this.leftbox.offsetTop-parseInt(this.mark.offsetHeight/2)
            //获取最大移动距离
            var maxX=this.leftbox.offsetWidth-this.mark.offsetWidth
            var maxY=this.leftbox.offsetHeight-this.mark.offsetHeight
            var x,y
            //水平方向移动
            if(left1<=0){
                this.mark.style.left="0px"
                x=0
            }else if(left1>=maxX){
                this.mark.style.left=maxX+'px'
                x=maxX
            }else{
                this.mark.style.left=left1+'px'
                x=left1
            }
    
            //垂直方向移动
            if(top1<=0){
                this.mark.style.top='0px'
                y=0
            }else if(top1>=maxY){
                this.mark.style.top=maxY+'px'
                y=maxY
            }else{
                this.mark.style.top=top1+'px'
                y=top1
            }
    
            //让右边图片进行移动
            this.rightImg.style.left=-2*x+'px'
            this.rightImg.style.top=-2*y+'px'
        }
    
        this.leftbox.onmouseout=()=>{
            this.mark.style.display='none'
            this.rightbox.style.display='none'
        }
    }
    //切换图片
    Fang.prototype.qiehuan=function(){
        var _this=this
        //遍历所有li对象
        for(let i=0;i<_this.lis.length;i++){
            //给每个li对象添加点击事件
            _this.lis[i].onclick=function(){
                //获取当前li对象中的img图片地址
                var imgUrl=this.querySelector('img').getAttribute('src')
                //把当前图片地址赋值给上面的图片
                _this.leftImg.setAttribute('src',imgUrl)
                _this.rightImg.setAttribute('src',imgUrl)
                //清空所有li标签中的class属性值
                for(let j=0;j< _this.lis.length;j++){
                    _this.lis[j].className=''
                }
                //给指定的li标签添加class属性值
                _this.lis[i].className='border'
            }
        }
    }
    var div1 = document.querySelector('.div1')
//实例化对象
new Fang(div1)
},10)
        
